

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>聊天记录</title>

  <link rel="stylesheet" href="../../../layui.css">
  <style>
    body .layim-chat-main{height: auto;padding-bottom: 45px;}
    .lay_page{position: fixed;bottom: 0;margin: 0 10px;background: #fff;width: 100%;}
    .layui-laypage{width: 105px;margin:0 auto;display: block}
  </style>
</head>
<body>

<div class="layim-chat-main pb45">
  <ul id="LAY_view"></ul>
</div>

<div class="lay_page" id="LAY_page" ></div>


<textarea title="消息模版" id="LAY_tpl" style="display:none;">
{{# layui.each(d.data, function(index, item){ }}
  {{# if(item.from == '0'){ }}
      <li class="layim-chat-system"><cite>{{ item.timestamp }}</cite><span>{{ layui.layim.content(item.content) }}</span></li>
  {{# } else { }}
    {{# if(item.from == parent.layui.layim.cache().mine.id){ }}
      <li class="layim-chat-mine"><div class="layim-chat-user"><img src="{{d.root}}/{{item.fromhead}}"><cite><i>{{ item.timestamp }}</i>{{ item.fromName }}</cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
    {{# } else { }}
      <li><div class="layim-chat-user"><img src="{{d.root}}/{{item.tohead}}"><cite>{{ item.fromName }}<i>{{item.timestamp }}</i></cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
    {{# } }}
  {{# }
}); }}
</textarea>

<!--
上述模版采用了 laytpl 语法，不了解的同学可以去看下文档：http://www.layui.com/doc/modules/laytpl.html

-->

<script src="../../../../layui.js"></script>
<script src="../../../../../../js/common.js"></script>
<script>

    layui.use(['layim', 'laypage'], function () {
        var layim = layui.layim
            ,layer = layui.layer
            ,laytpl = layui.laytpl
            ,$ = layui.jquery
            ,laypage = layui.laypage
            ,cachedata = parent.layui.layim.cache()
            //开始请求聊天记录
            ,param =  location.search; //获得URL参数。该窗口url会携带会话id和type，他们是你请求聊天记录的重要凭据
        var url =  getRootPath_web()+'/index.php/user/index/getChatLog'  || {};

        function formatDate(nS) {
            return new Date(parseInt(nS)*1000).toLocaleString();
        }

        $.get(url+param, function(res){
            if (res.code==-1){
                return    layer.msg('没有聊天记录')
            }
            laypage.render({
                elem: 'LAY_page'
                ,count: res.count
                ,limit: res.limit
                ,prev: '<i class="layui-icon">&#58970;</i>'
                ,next: '<i class="layui-icon">&#xe65b;</i>'
                ,layout: ['prev', 'next']
                ,curr: res.data.limit
                ,jump: function(obj, first){
                    //obj包含了当前分页的所有参数，比如：
                    var url =  getRootPath_web()+'/index.php/user/index/getChatLog'  || {};

                    //首次不执行
                    if(first){
                        var page = res.data.limit;
                    }else{
                        var page = obj.curr;
                    }
                    $.get(url+param, {page: obj.curr || 1}, function(res){
                        layui.each(res.data, function(index, item){
                            res.data[index]['timestamp'] =  formatDate(item.timestamp);
                        });
                        var html = laytpl(LAY_tpl.value).render({
                            data: res.data,
                            root: getRootPath_web(),
                        });
                        $('#LAY_view').html(html);
                    });

                }
            });
        });
    });
</script>
</body>
</html>
